<template>
	<view class="addAddress">
		<HeaderBar title="地址信息" showBack fixed>
			<template #right>
				<view @tap="check" class="edit">{{isEdit?"取消":"编辑" }}</view>
			</template>
		</HeaderBar>
		<view class="contentBox">
			<view class="from">
				<view class="fromItem">
					<view class="lable">
						请选择钱包网络
					</view>
					<view class="inputBox">
						<view class="">
							<!-- <text class="placeholder" v-if='!selctChain'>请选择钱包网络</text> -->
							<view class="select" v-if='selctChain'>
								<image :src="'/static/images/chain/' +selctChain.chainName+'.png'" mode="" class="icon">
								</image>
								<text>{{selctChain.chainName}}</text>
							</view>
						</view>
						<view class="right">
							<!-- <image src="../../static/images/personal/iptRight.png" mode="widthFix" class="icon"></image> -->
						</view>
					</view>
				</view>
				<view class="fromItem mt1">
					<view class="lable">
						钱包地址
					</view>
					<view class="inputBox">
						<view class="textarea">
							<textarea class="tt font" auto-height type="text" :disabled="!isEdit" v-model="address"
								placeholder="请输入地址" placeholder-style="color: #B2B2B2;font-size:24upx" />
						</view>
						<view class="right">
						<!-- 	<image src="../../static/images/personal/iptSand.png" mode="widthFix"
								style="width: 36upx;height: 36upx;" @tap="scanQRCode" ></image> -->
							<image src="/static/images/home/copy.png" mode="" v-if="!isEdit" style="width: 46upx;height: 46upx;"
								@tap="copy">
							</image>
						</view>
					</view>
				</view>
				<view class="fromItem mt2">
					<view class="lable">
						请设置名称
					</view>
					<view class="inputBox">
						<view class="input">
							<input type="text" class="font" :disabled="!isEdit" v-model="name" placeholder="请输入名称"
								placeholder-style="color: #B2B2B2;font-size:24upx" />
						</view>
					</view>
				</view>
				<view class="fromItem mt2">
					<view class="lable">
						设置备注
					</view>
					<view class="inputBox">
						<view class="input">
							<input type="text" class="font" :disabled="!isEdit" v-model="remark"
								placeholder="备注仅做补充信息，不参与链上交易" placeholder-style="color: #B2B2B2;font-size:24upx" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn_grounp" v-if="isEdit">
			<view class="btn">
				<view class="" @tap="renderjs.verifyAddress" :data-address="address" :data-type="chainType">
					保存
				</view>
			</view>
			<view class="btn del">
				<view class="" @tap="del">
					删除
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selctChain: null,
				chainType: "",
				address: "",
				name: "",
				remark: "",
				isEdit: false,
			}
		},
		onLoad(options) {
			const infoStr = options.info || '';
			try {
				// 解码并反序列化 JSON 字符串
				const info = JSON.parse(decodeURIComponent(infoStr));
				this.selctChain = info
				this.chainType = info.chainType
				this.address = info.address
				this.name = info.addressName
				this.remark = info.addressRemark
			} catch (error) {}
		},
		mounted() {},
		methods: {
			save() {
				let data = {
					address: this.address, //钱包地址
					addressName: this.name, //钱包名称
					chainType: this.selctChain.chainType, //链类型
					chainImg: this.selctChain.chainImg, //链图标
					chainName: this.selctChain.chainName, //链名
					chainId: this.selctChain.chainId, //链ID
					addressRemark: this.remark, //地址备注
				}
				uni.$db.update('list', {
					from: 'addressBook',
					set: data,
					where: [{
						address: `= "${this.address}"`,
						chainId: `= "${this.selctChain.chainId}"`,
					}]
				}).then(res => {
					uni.$emit("addressBook", data)
					uni.navigateBack();
				}).catch((err) => {
					return this.toast('更新失败，请退出重新尝试')
				});
			},
			del() {
				uni.showModal({
					title: '提示',
					content: `确认删除${this.name}？`,
					success: (res) => {
						if (res.confirm) {
							uni.$db.delete('list', {
								from: 'addressBook',
								where: [{
									address: `= "${this.address}"`, // 使用传入的 address
									chainId: `= "${this.selctChain.chainId}"`, // 使用传入的 chainId
								}]
							}).then((res) => {
								uni.$emit("addressBook", "")
								uni.navigateBack();
							}).catch((err) => {
								return this.toast('删除失败，请退出重新删除')
							});
						} else if (res.cancel) {}
					}
				});

			},
			toast(msg) {
				uni.showToast({
					title: msg,
					position: "bottom",
					icon: 'none'
				});
			},
			copy() {
				uni.setClipboardData({
					data: this.address,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
						});
					},
				});
			},
			// scanQRCode() {
			// 	uni.scanCode({
			// 		success: (res) => {
			// 			this.address = res.result;
			// 		},
			// 		fail: (err) => {}
			// 	});
			// },
			check() {
				this.isEdit = !this.isEdit
				this.chainType = this.selctChain.chainType
				this.address = this.selctChain.address
				this.name = this.selctChain.addressName
				this.remark = this.selctChain.addressRemark
			}
		}
	}
</script>
<script module="renderjs" lang="renderjs">
	export default {
		data() {
			return {
				jsLoadState: false,
				tjsLoadState: false,
			}
		},
		mounted() {
			const ethersScript = document.createElement('script');
			ethersScript.src = 'static/script/ethers-5.2.umd.min.js';
			ethersScript.onload = async () => {
				this.jsLoadState = true;
			};
			document.head.appendChild(ethersScript);
			// 载入 TronWeb.js
			const tronWebScript = document.createElement('script');
			tronWebScript.src = 'static/script/newTronWeb.js';
			tronWebScript.onload = () => {
				this.tjsLoadState = true;

			};
			document.head.appendChild(tronWebScript);
		},
		methods: {
			verifyAddress(e) {
				if (e.target.dataset.type == "ETH") {
					if (this.jsLoadState) {
						const isValid = ethers.utils.isAddress(e.target.dataset.address);
						if (isValid) {
							this.$ownerInstance.callMethod('save')
						} else {
							this.$ownerInstance.callMethod('toast', "地址有误")
						}
					}
				} else {
					if (this.tjsLoadState) {
						const tronWeb = new TronWeb.TronWeb({
							fullHost: 'https://api.tronstack.io'
						});
						const isValid = tronWeb.isAddress(e.target.dataset.address);
						if (isValid) {
							this.$ownerInstance.callMethod('save')
						} else {
							this.$ownerInstance.callMethod('toast', "地址有误")
						}
					}
				}
			}
		},
	}
</script>
<style lang="scss" scoped>
	@import "/static/iconfont/iconfont.css";

	.addAddress {
		height: 100%;
		font-weight: 26upx;
		font-weight: 400;
		color: #3D3D3D;
		font-size: 28upx;

		.edit {
			padding-right: 20upx;
		}

		.contentBox {
			padding: 32upx 40upx;
			border-top: 2upx solid #F6F6F6;

			.from {
				.mt1 {
					margin-top: 36upx;
				}

				.mt2 {
					margin-top: 40upx;
				}

				.fromItem {
					.lable {
						margin-bottom: 18upx;
					}

					.inputBox {
						border: 2upx solid #C3C3C3;
						border-radius: 20upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						min-height: 90upx;
						padding-left: 42upx;
						padding-right: 30upx;

						.textarea {
							flex: 1;
							margin-right: 20upx;

							.tt {
								width: 100%;
								padding: 20upx 0;
							}
						}

						.placeholder {
							color: #B2B2B2;
							font-size: 24upx
						}

						.font {
							font-size: 28upx
						}

						.select {
							display: flex;
							align-items: center;

							.icon {
								width: 68upx;
								height: 68upx;
								margin-right: 30upx;
							}
						}

						.right {
							display: flex;

							.icon {
								width: 20upx;
								height: 20upx;
							}
						}

						.input {
							flex: 1;
						}
					}
				}
			}
		}

		.btn_grounp {
			margin: 228upx 40upx 20upx;

			.btn {
				margin-top: 20upx;
				font-size: 26upx;
				color: #F6F6F6;
				line-height: 88upx;
				background: linear-gradient(180deg, #A9E993 0%, #368321 100%);
				border-radius: 10upx;
				text-align: center;
			}

			.del {
				background: #FFEDED;
				color: #CF6E5F;
			}
		}


		.popupTitle {
			text-align: center;
			position: relative;
			height: 80upx;
			line-height: 80upx;
			font-size: 28upx;

			.iconfont {
				position: absolute;
				right: 30upx;
			}
		}

		.scroll-Y {
			height: 60vh;

			.scroll-view-item {
				height: 120upx;
				display: flex;
				align-items: center;
				padding: 0 30upx;

				.icon {
					width: 68upx;
					height: 68upx;
				}

				.chain {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 30upx;
					font-size: 28upx;
					border-bottom: 0.5px solid #D8D8D8;
					height: 100%;

				}
			}
		}

	}
</style>